<!-- 提现记录 -->
<template>
	<!-- 记录卡片 -->
	<view style="overflow: hidden;">
		<u-tabs :list="tab_list" @change="changeTab" activeColor="#dd0000" style="position:fixed;width: 100%;background-color: #fff;z-index: 99;" name="label"></u-tabs>
		<view class="wallet-log-box u-p-b-30" style="margin-top: 80rpx;">
			<view class="log-list" v-for="(item,index) in withdrawLog" :key="index">
				<view class="head u-flex u-col-center u-row-between">
					<view class="title">提现至{{ item.withdraw_type_name }} </view>
					<view class="num">{{ item.money }} 元</view>
				</view>
				<view class="status-box item  u-flex u-col-center u-row-between">
					<view class="item-title">申请状态</view>
					<view class="status-text" :style="{ color: stausMap[item.status] }">{{ item.status_name }}</view>
				</view>
				<view class="time-box item  u-flex u-col-center u-row-between">
					<text class="item-title">账户信息</text>
					<view class="time u-ellipsis-1">
						{{item.withdraw_info_array['银行卡号'] ||item.withdraw_info_array['微信用户'] || item.withdraw_info_array['支付宝账户']}}
					</view>
				</view>
				<view class="time-box item  u-flex u-col-center u-row-between">
					<text class="item-title">提现单号</text>
					<view class="time">{{ item.id }}</view>
				</view>
		
				<view class="time-box item  u-flex u-col-center u-row-between">
					<text class="item-title">手续费</text>
					<view class="time" style="color:#fa3534">{{ item.charge_money }} 元</view>
				</view>
				<view class="time-box item  u-flex u-col-center u-row-between">
					<text class="item-title">实际到账金额</text>
					<view class="time" style="color:#fa3534">{{ item.actual_money}} 元</view>
				</view>
				<view class="time-box item  u-flex u-col-center u-row-between">
					<text class="item-title">申请时间</text>
					<view class="time">{{item.created_at }}</view>
				</view>
				<view class="time-box item  u-flex u-col-center u-row-between" v-if="item.status >= 2 && item.dianpuwithdrawlogs[0]">
					<text class="item-title">打款时间</text>
					<view class="time">{{ item.dianpuwithdrawlogs[0].created_at }}</view>
				</view>
				<view class="time-box item  u-flex u-col-center u-row-between">
					<text class="item-title" style="font-size: 32rpx;"></text>
					<view class="time">
						<u-button v-if="item.status == '0'" type="error" size="small" style="font-size: 24rpx;padding: 10rpx 30rpx;" @tap="openModal('cancel',item.id)">取消</u-button>
						<u-button v-else-if="item.status == '2'" type="success" size="small" @tap="openModal('finished',item.id)" style="font-size: 24rpx;padding: 10rpx 30rpx;">确认收款</u-button>
					</view>
				</view>
			</view>
			<!-- 更多 -->
			<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc"  />
			<!-- 空置页 -->
			<shopro-empty v-show="isEmpty" marginTop="300rpx" :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="暂无数据~" >
			</shopro-empty>
			<u-modal v-model="modal.show_modal" :content="modal.content" :show-cancel-button="true" @confirm="handleOperator"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				modal:{
					show_modal:false,
					content:"",
				},
				withdrawLog: [],
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				isEmpty: false,
				stausMap: {
					0: '#999',
					1: '#EFAF41',
					2: '#70C140',
					'-1': '#ED5B56'
				},
				cur_index:0,
				tab_list: [{
					label: '待处理',
				},{
					label: '被拒绝'
				},{
					label: '已同意'
				},{
					label: '待收款',
				}, {
					label: '已完成'
				}],
				fetch_type:"",
				confirm_data:{
					
				}
			}
		},
		computed: {},
		filters: {
			applyInfoFilter: function(value) {
				if (!value) return '-';
				return Object.values(value).join(' | ');
			}
		},
		onLoad() {
			this.withdrawLog = [];
			this.getLog(this.cur_index);
		},
		onShow() {
			this.withdrawLog = [];
		},
		
		// 触底加载更多
		onReachBottom() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getLog(this.cur_index);
			}
		},
		methods: {
			openModal(type,id){
				this.fetch_type = type;
				this.confirm_data.id = id 
				if(type == 'cancel'){
					this.modal.content = "确认取消申请提现吗？"
				}
				
				if(type == 'finished'){
					this.modal.content = "确认款已到账吗？"
				}
				this.modal.show_modal = true;
			},
			handleOperator(){
				this.$http(`money.dianpu_withdraw_${this.fetch_type}`,this.confirm_data).then(res=>{
					if(res.ret == 1){
						this.$u.toast(res.msg);
						this.getLog()
					}
				})
			},
			changeTab(index){
				this.currentPage = 1;
				this.cur_index = index;
				this.withdrawLog = [];
				this.getLog()
			},
			// 确认提交表单
			getLog() {
				let that = this;
				that.loadStatus = 'loading';
				/**
				 * 'waiting'=>'待处理',
				 * 'denied'=>'被拒绝',
				 * 'agreed'=>'已同意',
				 * 'confirming'=>'待收款',
				 * 'finished'=>'已完成'
				 */
				const status = ['waiting', 'denied', 'agreed','confirming', 'finished']
				that.$http('money.dianpu_withdraw_userapplylist', {
					mode: status[this.cur_index],
					page: that.currentPage
				}).then(res => {
					if (res.total > 0) {
						that.withdrawLog = [...that.withdrawLog, ...res.rows];
						that.lastPage += 1;
						that.loadStatus = that.currentPage < (res.total / 10) ? 'loadmore' : 'nomore';
						that.isEmpty = false;
						return
					}
					if(that.withdrawLog.length == 0){
						that.isEmpty = true;
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.wallet-log-box {
		overflow: hidden;
	}

	// 记录卡片
	.log-list {
		min-height: 213rpx;
		background: #ffffff;
		margin-bottom: 10rpx;
		padding-bottom: 10rpx;

		.head {
			padding: 0 35rpx;
			height: 80rpx;
			border-bottom: 1rpx solid #eee;
			margin-bottom: 20rpx;

			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.num {
				font-size: 28rpx;
				font-weight: 500;
				color: #7063d2;
			}
		}

		.item {
			padding: 0 30rpx 10rpx;

			.item-icon {
				color: #c0c0c0;
				font-size: 36rpx;
				margin-right: 8rpx;
			}

			.item-title {
				width: 180rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #c0c0c0;
			}

			.status-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #05c3a1;
			}

			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: #c0c0c0;
			}
		}
	}
</style>
